<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>首页 · 拓观</title>
    <meta content="" name="description" />
    <meta content="" name="keywords" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <link rel="stylesheet" href="assets/css/public.css" />
    <link rel="stylesheet" href="assets/css/index.css" />
    <!-- <link rel="icon" type="image/x-icon" href="favicon.ico" /> -->
</head>

<body>
    <!-- 加载页面-->
    <div id="page-preloader">
        <span class="spinner"></span>
    </div>
    <!-- 加载页面-->
    <!-- 搜索-->
    <div class="search">
        <input type="text" class="input" placeholder="Search...">
        <input type="submit" class="btn" value=" ">
    </div>
    <div class="search-layout">
        <div class="search-result">
            <a class="close" href="JavaScript:;">
             <img src="./images/close.png"/> 
        </a>
            <div class="row">
                <!-- 
            <div class="col col-xs-6 col-md-4 col-lg-3"><a>你好世界</a></div>
            <div class="col col-xs-6 col-md-4 col-lg-3"><a>你好世界</a></div>
            <div class="col col-xs-6 col-md-4 col-lg-3"><a>你好世界</a></div> -->
            </div>
        </div>
    </div>
    <!-- 搜索-->
    <div data-header="sticky" data-header-top="200" class="index layout-theme animated-css">

        <!-------------------------- 导航条 Start -------------------------->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">
                        <img src="./images/logo_mod-a.png" alt="拓观设计 首页">
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="">
                            <a href="index.html" class="active">首页
                                <span class="sr-only">(current)</span>
                            </a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观故事
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="pages/introduce.html">拓观介绍</a>
                                </li>
                                <li>
                                    <a href="pages/framework.html">拓观框架</a>
                                </li>
                                <li>
                                    <a href="pages/team.html">团队主创</a>
                                </li>
                                <li>
                                    <a href="pages/honor.html">拓观荣誉</a>
                                </li>
                                <li>
                                    <a href="pages/customer.html">拓观客户</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观作品
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="pages/project.html?type=1">精品住宅</a>
                                </li>
                                <li>
                                    <a href="pages/project.html?type=2">商业办公</a>
                                </li>
                                <li>
                                    <a href="pages/project.html?type=3">产业园区</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">拓观文化
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="pages/activity.html?type=1">学术</a>
                                </li>
                                <li>
                                    <a href="pages/activity.html?type=2">媒体</a>
                                </li>
                                <li>
                                    <a href="pages/activity.html?type=3">活动</a>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">招聘·联络
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="pages/value.html">价值分享</a>
                                </li>
                                <li>
                                    <a href="pages/invite.html?type=1">校园招聘</a>
                                </li>
                                <li>
                                    <a href="pages/invite.html?type=2">社会招聘</a>
                                </li>
                                <li>
                                    <a href="pages/contacts.html">联系我们</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-------------------------- 导航条 End -------------------------->

        <!-------------------------- 轮播图 Start -------------------------->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <a href="pages/projectdetail.html">拓观</a>
                </div>
                <div class="item">
                    <a href="pages/projectdetail.html">拓观</a>
                </div>
                <div class="item">
                    <a href="pages/projectdetail.html">拓观</a>
                </div>
            </div>
        </div>
        <!-------------------------- 轮播图 End -------------------------->

        <!-- 页脚部分 Start -->
        <div class="index-footer">
            <div class="footer-wrap">
                <div class="copy">COPYRIGHT &copy; 2017 TUOGUAN COPYRIGTHS RESERVED</div>
                <div class="quick">
                    <a href="http://www.miibeian.gov.cn/" target="_blank">浙ICP备11004507号-1</a> &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="pages/contacts.html">联系我们</a> &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="javascript:showWeixin()" class="weixin">微信公众号</a>
                </div>
            </div>
        </div>
        <!-- 页脚部分 End -->
        <div class="weixin-bg" onmousedown="removeWeixin()"></div>
        <div class="weixin-wapper">
            <img src="images/wx.png" alt="微信 weixin" />
        </div>
    </div>

</body>

<script src="http://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>
<!-- <script src="assets/js/separate-js/custom.js"></script> -->
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous"></script>
<script src="assets/js/footer.js"></script>
<script>
    $(function () {

        var height = $(window).height() - 100;
        $(".carousel-inner > .item,.search-layout").css('height', height);
        $('.carousel').carousel({
            interval: 5000,
            pause: null
        });

        $(".search .input").click(function () {
            $(this).addClass("foc")
            var v = $(".search .input");
            if (v.val() == "Search...") {
                $(".search .input").val("");
            }
        })

        $(".search .input").focusout(function () {
            var v = $(".search .input");
            if (v.val() == "" || v.val() == null) {
                $(this).removeClass("foc")
                $(".search .input").val("Search...");
            }
        })

        $("a.close").click(function () {
            $(".search-result").animate({
                "height": 0
            }, 500, function () {
                $(".search-layout,.search-result").hide();
            })
        })
        $(".search .btn").bind("click", search);
        $('.search .input').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                search();
            }
        });
    });

    function search() {
        var value = $(".search .input").val();
        if (value == "" || value == null) {
            alert("请输入关键字！")
            return
        }

        var str = "";
        data = [{
            "id": 1,
            "title": "你好，拓观"
        }, {
            "id": 2,
            "title": "你好，世界"
        }, {
            "id": 3,
            "title": "世界那么美好，我不要写代码"
        }, {
            "id": 4,
            "title": "还有诗和远方"
        }, {
            "id": 5,
            "title": "我们去看看吧"
        }, {
            "id": 6,
            "title": "你好，大山"
        }, {
            "id": 7,
            "title": "狼来了的故事你听过吗？"
        }, {
            "id": 8,
            "title": "地球是圆的"
        }, {
            "id": 9,
            "title": "我好像是方的"
        }, {
            "id": 10,
            "title": "妥妥的疯了"
        }, {
            "id": 11,
            "title": "来，一起跳舞吧"
        }, {
            "id": 12,
            "title": "说说你心动的感觉"
        }, {
            "id": 13,
            "title": "让我们一起摇摆"
        }, {
            "id": 5,
            "title": "我们去看看吧"
        }, {
            "id": 6,
            "title": "你好，大山"
        }, {
            "id": 7,
            "title": "狼来了的故事你听过吗？"
        }, {
            "id": 8,
            "title": "地球是圆的"
        }, {
            "id": 9,
            "title": "我好像是方的"
        }, {
            "id": 10,
            "title": "妥妥的疯了"
        }, {
            "id": 11,
            "title": "来，一起跳舞吧"
        }, {
            "id": 12,
            "title": "说说你心动的感觉"
        }, {
            "id": 13,
            "title": "让我们一起摇摆"
        }];
        for (var i = 0; i < data.length; i++) {
            var j = eval(data[i])
            if (j.length != 0) {
                str += "<div class='col col-xs-12 col-md-4 col-lg-3'>"
                if (i == 0) {
                    str += "<a href='/pages/activitydetail.html?id=" + j.id + "'>[新闻资讯]"
                } else if (i == 1) {
                    str += "<a href='/pages/team.html?id=" + j.id + "'>[团队主创]"
                } else {
                    str += "<a href='/pages/projectdetail.html?id=" + j.id + "'>[项目展示]"
                }
                str += j.title + "</a></div>"
            }
        }
        if (str == "") {
            $(".search-result .row").html("<div class='col col-xs-6 col-md-4 col-lg-3'>搜索无结果</div>")
        } else {
            $(".search-result .row").html(str)
        }

        console.log($(window).width())

        $(".search-layout,.search-result").show();
        $(".search-result").animate({
            "height": 200
        }, 500)
        // $.post("../article", {
        //         keyword: value
        //     },
        //     function (data) {
        //     });
    }
</script>

</html>